<template>
	<div class="booking-notice" v-if="show" @click="handleClick">
		<view class="box" :style="{ backgroundImage: `url(${imgBaseUrl}booking-notice-bg.png)` }">
			<view class="content-wrap">
				<image :src="`${imgBaseUrl}booking-notice-close.png`" class="close-icon" @click="handleClick" />
				<image :src="`${imgBaseUrl}booking-notice-top-icon.png`" class="top-icon" />
				<view class="title">{{ booking_notice.title }}</view>
				<view class="content">{{ booking_notice.content }}</view>
			</view>
			<view class="bottom">
				<zjy-button @click="handleClick">确认，我已知晓</zjy-button>
			</view>
		</view>
	</div>
</template>

<script setup lang="ts">
interface BookingNoticeModalProps {
	show: boolean
	booking_notice: {
		title: string
		content: string
	}
}
withDefaults(defineProps<BookingNoticeModalProps>(), {
	show: false,
})

const imgBaseUrl = inject("imgBaseUrl")

const emit = defineEmits(["close"])

const handleClick = () => emit("close")
</script>

<script lang="ts">
export default {
	options: { styleIsolation: "shared" },
}
</script>

<style lang="scss" scoped>
.booking-notice {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10075;
}

.box {
	position: relative;
	width: 654rpx;
	padding: 90rpx 40rpx 48rpx;
	background: #ffffff;
	border-radius: 24rpx;
	background-repeat: no-repeat;
	background-size: 654rpx 400rpx;
	background-position: 0 -2rpx;

	.content-wrap {
		max-height: 500rpx;
		overflow-y: auto;
	}

	.close-icon {
		position: absolute;
		right: 32rpx;
		top: 24rpx;
		width: 32rpx;
		height: 32rpx;
	}

	.top-icon {
		position: absolute;
		top: -82rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 247rpx;
		height: 186rpx;
	}

	.title {
		font-weight: 500;
		font-size: 36rpx;
		color: #1d2129;
		line-height: 50rpx;
		text-align: center;
		word-break: break-all;
	}

	.content {
		margin-top: 32rpx;
		font-size: 28rpx;
		color: #4e5969;
		line-height: 42rpx;
		word-break: break-all;
		white-space: break-spaces;
	}

	.bottom {
		margin-top: 24rpx;

		::v-deep .zjy-button {
			font-weight: 600 !important;
		}
	}
}
</style>
